<template lang="html">
  <div class="quill-editor">
    <div ref="toolbar" class="toolbar"></div>
    <div ref="editor" class="ql-container"></div>
  </div>
</template>

<script>
import E from 'wangeditor'
import { uploadFileForEditorPic } from '@/api/upLoad'

export default {
  data () {
    return {
      editor: null,
      content: null,
      editorOption: {
        placeholder: this.placeholderText,
        modules: {
          toolbar: '#toolbar'
        }
      }
    }
  },
  props: {
    value: {
      type: String
    },
    /* 上传图片的file控件name */
    fileName: {
      type: String,
      default: 'file'
    },
    maxUploadSize: {
      type: Number,
      default: 1024 * 1024 * 500
    },
    // 提示文字
    placeholderText: {
      type: String,
      default: '请输入具体内容'
    }
  },
  watch: {
    value: function (value) {
      if (value !== this.editor.txt.html()) {
        this.editor.txt.html(this.value)
      }
    }
  },
  mounted () {
    this.seteditor()
    this.editor.txt.html(this.value)
  },
  methods: {
    seteditor () {
      this.editor = new E(this.$refs.toolbar, this.$refs.editor)

      // 配置菜单
      this.editor.customConfig.menus = [
        'head', // 标题
        'bold', // 粗体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'fontSize', // 字号
        'fontName', // 字体
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'link', // 插入链接
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        'emoticon', // 表情
        'image', // 插入图片
        'table', // 表格
        // 'video', // 插入视频
        // 'code', // 插入代码
        'undo', // 撤销
        'redo', // 重复
        'fullscreen' // 全屏
      ]

      // 自定义上传图片事件
      this.editor.customConfig.customUploadImg = (files, insert) => {
        // files 是 input 中选中的文件列表
        // insert 是获取图片 url 后，插入到编辑器的方法
        if (files.length === 0) {
          return
        }
        const data = new FormData()
        data.append(this.fileName, files[0])
        uploadFileForEditorPic(data).then(res => {
          if (this.$constant.SUCCESS === res.code) {
            if (res.data) {
              // 上传代码返回结果之后，将图片插入到编辑器中
              insert(res.data)
            }
          }
        })
      }

      this.editor.customConfig.onchange = (html) => {
        // 绑定当前逐渐地值
        this.content = html
        // 将内容同步到父组件中
        this.$emit('inputContent', this.content)
      }

      // 创建富文本编辑器
      this.editor.create()
    }
  }
}
</script>

<style lang="scss">
.quill-editor {
  width: 100%;
  margin: 0 auto;
  border: 1px solid #ccc !important;
  border-radius: 5px;
}

.toolbar {
  border-bottom: 1px solid #ccc !important;

  .w-e-menu {
    z-index: 1 !important;
  }
}

.ql-container {
  min-height: 300px;
  z-index: 0 !important;

  ::v-deep .w-e-text {
    width: auto !important;
    overflow: auto;
    min-height: 300px;
  }
}
</style>
